<template>
  <div id="slideshow">
    <ul>
      <todo-item v-for="(item,index) of list" :key="index" :content='item'></todo-item>
    </ul>
  </div>
</template>

<script>
import Todoitem from './Todoitem'
import img1 from '../../assets/images/课程图片.png'
import img2 from '../../assets/images/kecheng2.png'
import img3 from '../../assets/images/kecheng3.png'
export default {
  name: 'slideshow',
  data () {
    return {
      list: [img1, img2, img3]
    }
  },
  components: {
    'todo-item': Todoitem
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#slideshow{
  width:100%;
  height:248px;
  overflow: hidden;/* 溢出 */
  /* border-bottom: 10px #adabab solid;
  border-top: 10px #adabab solid; */
  position: relative;
}
#slideshow ul{
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
